<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" /> 
<title>Hello World!</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
	
<script type="text/javascript">
	/**
	 *  $(document) create a new DOM JQuery object.
	 *  
	 *  The ready() method will be involved authmatically after page be loaded.
	 */
	var focusedCell;
	/////////////////////////////////////////////
	//
	function closeEditableCell(cell)
	{
		if(null != cell)
		{
			$('#excelSheet tr').eq(cell.closest("tr").index()+1).children().first().css('background','');
			$('#excelSheet tr').eq(0).children().eq(cell.closest("td").index()).css('background','');
			cell.html(cell.find("input").val());
			//$("#excelSheetInput").val("");
			focusedCell = null;
		}
	}
	
	function onEnterEscapeKeyPressed(event)
	{
		var code = (event.keyCode ? event.keyCode : event.which);
		console.log(code);
		if(code == 13 || code==27) {
			closeEditableCell(focusedCell);
		}
	}

	function initialexcelSheet()
	{
		$("#excelSheetInput").keyup(function(event){
			onEnterEscapeKeyPressed(event);
			
			if(null != focusedCell)
			{
				focusedCell.find("input").val($(this).val());
			}
		});
		
		$("#excelSheet td").bind('keypress', function(event){
			onEnterEscapeKeyPressed(event);
		});
		
		
		$("#excelSheetInput").val("");
		
		$("#excelSheetInput").click(function(event){
			event.stopPropagation();
		});

		$("#excelSheet td").click(function(event){
			if(!$(this).is(focusedCell))
			{
				deselectRowCol();
				closeEditableCell(focusedCell);

				focusedCell = $(this);
				var row = focusedCell.closest("tr").index();	//$(this).parent().parent().children().index($(this).parent());
				var col = focusedCell.closest("td").index();	//$(this).parent().children().index($(this));

				console.log('[' + String.fromCharCode(64+col) + ':' + (1 + row) + ']:' + focusedCell.html());
				
				$('#excelSheet tr').eq(row+1).children().first().css('background','#CCCCFF');
				$('#excelSheet tr').eq(0).children().eq(col).css('background','#CCCCFF');

				$("#excelSheetInput").val(focusedCell.html());

				focusedCell.html("<input id='cellInput' value='" + focusedCell.html() + "'></input>");
				//focusedCell.find("input").css('width', '100%');
				focusedCell.find("input").select();
				
				$("#cellInput").keyup(function(){
					console.log();
					if(null != focusedCell)
					{
						$("#excelSheetInput").val($(this).val());
					}
				});
			}
			
			event.stopPropagation();
		});
		
		$("#excelSheet thead th").click(function(event){
			deselectRowCol();
			closeEditableCell(focusedCell);
			
			var row = $(this).closest("tr").index();
			var col = $(this).closest("th").index();
			
			console.log('[' + col + ':' + row + ']:' + $(this).html());
			$('#excelSheet td:nth-child('+(col+1)+')').css('background','#CCCCFF');
			
			event.stopPropagation();
		});

		$("#excelSheet tbody tr").click(function(event){
			deselectRowCol();
			closeEditableCell(focusedCell);

			$(this).css('background','#CCCCFF');
			
			event.stopPropagation();
		});
	}
	
	function deselectRowCol()
	{
		$("tr").css('background','');
		$("td").css('background','');
	}

	function saveExcel()
	{
		//alert($("#simpleExcel").html());

		$.post('saveExcel.jsp', 
				{'content': $("#simpleExcel").html()},
				function(data) {alert(data);}
			)
			.done(function() { alert("success"); })
			.fail(function() { alert("error"); })
			.always(function() { alert("finished"); });
	}

	//////////////////////////////////////////////
	//
	$(document).ready(function()
	{	
		$("a").click(function() {
			alert("Hello world!");
		});
		
		// Add class for link.
		$("a").addClass("test");
		
		// Hide hidMe div
		$("#hideMe").click(function(event){
			 event.preventDefault();
			 $(this).hide("slow");
		});
		

		initialexcelSheet();
	});
	
	$(document).on('click', function () {
		closeEditableCell(focusedCell);
	});
	
</script>

</head>

<body>
<div id="simpleExcel">
<div>Simple EXCEL:<input id="excelSheetInput"></input></div>
<table id="excelSheet">
	<thead>
	<tr>
		<th width='20'></th>
		<th width='250'>A</th>
		<th width='100'>B</th>
		<th width='150'>C</th>
		<th width='100'>D</th>
		<th width='150'>E</th>
		<th width='350'>F</th>
		<th width='60'>G</th>
		<th width='80'>H</th>
		<th width='80'>I</th>
	</tr>
	</thead>
	<tbody>
		<tr>
			<th>1</th>
			<td>Email</td>
			<td>Id</td>
			<td>Phone</td>
			<td>Total</td>
			<td>Ip</td>
			<td>Url</td>
			<td>Time</td>
			<td>ISO Date</td>
			<td>UK Date</td>
		</tr>
		<tr>
			<th>2</th>
			<td>devo@flexomat.com</td>
			<td>66672</td>
			<td>941-964-8535</td>
			<td>$2482.79</td>
			<td>172.78.200.124</td>
			<td>http://gmail.com</td>
			<td>15:10</td>
			<td>1988/12/14</td>
			<td>14/12/1988</td>
		</tr>
		<tr>
			<th>3</th>
			<td>henry@mountdev.net</td>
			<td>35889</td>
			<td>941-964-9543</td>
			<td>$2776.09</td>
			<td>119.232.182.142</td>
			<td>http://www.gmail.com</td>
			<td>3:54</td>
			<td>1974/1/19</td>
			<td>19/1/1974</td>
		</tr>
	</tbody>
</table>
</div>

<input type='button' value='save' onclick='saveExcel()'>
</body>
</html>
